<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <title>Faceting</title>
    <link rel="stylesheet" href="../libraries/frameworks/minimal/stylesheets/styles.css">
    <link rel="stylesheet" href="../libraries/highlighters/highlight.js/css/solarized_dark.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <style>
body {
  background-image: url(../libraries/frameworks/minimal/images/fabric_of_squares_gray.png)
}  
div.nav {
  top: 250px;
  width:270px;
  float:left;
  position:fixed;
}
p {
  text-align: justify;
}
</style>
    
    <script src="../libraries/widgets/polycharts/js/polychart2.standalone.js"></script>

  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Faceting</h1>
        <p>rCharts</p>
        <p class="view">
    <a href="http://github.com/ramnathv/rCharts">
     View the Project on GitHub <small>ramnathv/rCharts</small>
    </a>
  </p>
  <ul>
    <li><a href="https://github.com/ramnathv/rCharts/zipball/master">
      Download <strong>ZIP File</strong>
    </a></li>
    <li><a href="https://github.com/ramnathv/rCharts/tarball/master">
      Download <strong>TAR Ball</strong>
    </a></li>
    <li><a href="http://github.com/ramnathv/rCharts">
      Fork On <strong>GitHub</strong></a>
    </li>
  </ul>
</header> 
<div class='nav'>
  <ol style='display:block;'>
    <li><a href="#">Lesson 1 </a></li>
     <li><a href="#">Lesson 2 </a></li>
  </ol>
</div>
<section>
        <h2>Facets</h2>
<p>Facets display subsets of the dataset in different panels. Such plots are also referred to as small multiple plots and are useful when dealing with datasets having multiple variables. <code>rCharts</code> uses lattice like syntax to specify the faceting variable. Here is an example to get you started, where we get multiple scatterplots of <code>mpg</code> vs <code>cyl</code> for each level of the variable <code>cyl</code>. </p>

<div id='chart1' class='rChart'></div>

<pre><code class="r">require(rCharts)
p1 &lt;- rPlot(mpg ~ wt | cyl, data = mtcars, type = &#39;point&#39;, width = 600)
p1$printChart(&#39;chart1&#39;)
</code></pre>

<script type='text/javascript'>
    var chartParams = {"dom":"chart1","width":600,"height":400,"layers":[{"x":"wt","y":"mpg","data":{"mpg":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"cyl":[6,6,4,6,8,6,8,4,4,6,6,8,8,8,8,8,8,4,4,4,4,8,8,8,8,4,4,4,8,6,8,4],"disp":[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8,275.8,275.8,472,460,440,78.7,75.7,71.1,120.1,318,304,350,400,79,120.3,95.1,351,145,301,121],"hp":[110,110,93,110,175,105,245,62,95,123,123,180,180,180,205,215,230,66,52,65,97,150,150,245,175,66,91,113,264,175,335,109],"drat":[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3.07,3.07,3.07,2.93,3,3.23,4.08,4.93,4.22,3.7,2.76,3.15,3.73,3.08,4.08,4.43,3.77,4.22,3.62,3.54,4.11],"wt":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"qsec":[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3,18.9,17.4,17.6,18,17.98,17.82,17.42,19.47,18.52,19.9,20.01,16.87,17.3,15.41,17.05,18.9,16.7,16.9,14.5,15.5,14.6,18.6],"vs":[0,0,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,1],"am":[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1],"gear":[4,4,4,3,3,3,3,4,4,4,4,3,3,3,3,3,3,4,4,4,3,3,3,3,3,4,5,5,5,5,5,4],"carb":[4,4,1,1,2,1,4,2,2,4,4,3,3,3,4,4,4,1,2,1,1,2,2,4,2,1,2,2,4,6,8,2]},"type":"point"}],"facet":{"type":"wrap","var":"cyl"},"guides":[],"coord":[]}
    _.each(chartParams.layers, function(el){
        el.data = polyjs.data(el.data)
    })
    polyjs.chart(chartParams);
</script>

<p>It is also possible to split the data based on two variables. In the second example, a scatterplot is created for each unique combination of levels of the variables <code>cyl</code> and <code>am</code>.</p>

<div id='chart2' class='rChart'></div>

<pre><code class="r">p2 &lt;- rPlot(mpg ~ wt | cyl  + am, data = mtcars, type = &#39;point&#39;, dom = &#39;chart2&#39;, 
 width = 600)
p2$printChart(&#39;chart2&#39;)
</code></pre>

<script type='text/javascript'>
    var chartParams = {"dom":"chart2","width":600,"height":400,"layers":[{"x":"wt","y":"mpg","data":{"mpg":[21,21,22.8,21.4,18.7,18.1,14.3,24.4,22.8,19.2,17.8,16.4,17.3,15.2,10.4,10.4,14.7,32.4,30.4,33.9,21.5,15.5,15.2,13.3,19.2,27.3,26,30.4,15.8,19.7,15,21.4],"cyl":[6,6,4,6,8,6,8,4,4,6,6,8,8,8,8,8,8,4,4,4,4,8,8,8,8,4,4,4,8,6,8,4],"disp":[160,160,108,258,360,225,360,146.7,140.8,167.6,167.6,275.8,275.8,275.8,472,460,440,78.7,75.7,71.1,120.1,318,304,350,400,79,120.3,95.1,351,145,301,121],"hp":[110,110,93,110,175,105,245,62,95,123,123,180,180,180,205,215,230,66,52,65,97,150,150,245,175,66,91,113,264,175,335,109],"drat":[3.9,3.9,3.85,3.08,3.15,2.76,3.21,3.69,3.92,3.92,3.92,3.07,3.07,3.07,2.93,3,3.23,4.08,4.93,4.22,3.7,2.76,3.15,3.73,3.08,4.08,4.43,3.77,4.22,3.62,3.54,4.11],"wt":[2.62,2.875,2.32,3.215,3.44,3.46,3.57,3.19,3.15,3.44,3.44,4.07,3.73,3.78,5.25,5.424,5.345,2.2,1.615,1.835,2.465,3.52,3.435,3.84,3.845,1.935,2.14,1.513,3.17,2.77,3.57,2.78],"qsec":[16.46,17.02,18.61,19.44,17.02,20.22,15.84,20,22.9,18.3,18.9,17.4,17.6,18,17.98,17.82,17.42,19.47,18.52,19.9,20.01,16.87,17.3,15.41,17.05,18.9,16.7,16.9,14.5,15.5,14.6,18.6],"vs":[0,0,1,1,0,1,0,1,1,1,1,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1,0,1,0,0,0,1],"am":[1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,1,1,1,1,1,1,1],"gear":[4,4,4,3,3,3,3,4,4,4,4,3,3,3,3,3,3,4,4,4,3,3,3,3,3,4,5,5,5,5,5,4],"carb":[4,4,1,1,2,1,4,2,2,4,4,3,3,3,4,4,4,1,2,1,1,2,2,4,2,1,2,2,4,6,8,2]},"type":"point","dom":"chart2"}],"facet":{"type":"grid","x":"cyl","y":"am"},"guides":[],"coord":[]}
    _.each(chartParams.layers, function(el){
        el.data = polyjs.data(el.data)
    })
    polyjs.chart(chartParams);
</script>

<p><code>rCharts</code> allows you to build the faceting specification after you have created your main plot. Here is an example creating the same plots using this alternate approach</p>

<pre><code class="r">p1 &lt;- rPlot(mpg ~ wt, data = mtcars, type = &#39;point&#39;)
p1$facet(var = &#39;cyl&#39;, type = &#39;wrap&#39;, rows = 3)
</code></pre>

<p>The <code>facet</code> method in <code>rCharts</code> allows finer control of the faceting. Depending on whether you are splitting the data by one or two data columns, it accepts a different set of arguments.</p>

<p><strong>Wrap</strong> : Split by one data column</p>

<pre><code>type      &quot;wrap&quot;                                       (required)
var       name of the variable to split the data on    (required)
cols      number of columns of panes
rows      number of rows of panes
formatter NOT supported by rCharts
</code></pre>

<p><strong>Grid</strong> : Split by two data columns</p>

<pre><code>type      &quot;grid&quot;                                     (required)
x         name of the x variable to split the data on  (required)
y         name of the y variable to split the data on  (required)
formatter NOT supported by rCharts
</code></pre>

<p>For more details, refer to the documentation on the <a href="https://github.com/Polychart/polychart2/wiki/Facet">PolychartsJS Wiki</a></p>

      </section>
      <footer>
        <p>This project is maintained by <a href="http://github.com/ramnathv">
          Ramnath Vaidyanathan
        </a></p>
        <p><small>Hosted on GitHub Pages &mdash; Theme by 
          <a href="https://github.com/orderedlist">orderedlist</a></small>
        </p>
      </footer>    </div>
    <script src="../libraries/frameworks/minimal/javascripts/scale.fix.js"></script>
  </body>
  <!-- Load Javascripts for Widgets -->
  
  
  <!-- LOAD HIGHLIGHTER JS FILES -->
  <script src="../libraries/highlighters/highlight.js/highlight.pack.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
  <!-- DONE LOADING HIGHLIGHTER JS FILES -->
   
  </html>